<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<style>

    body {
        margin: 0;
        padding: 0;
        background-color: #0E3B7C;
    }

    .grid {
        position: absolute;
        width: 100px;
        height: 100px;
        border: 1px solid #fff;
        opacity: 0.1;
        animation:scale 2s linear infinite;
        box-sizing: border-box;
    }

    @keyframes scale {
        0% {
            width: 100px;
            height: 100px;
        }
        100% {
            width: 50px;
            height: 50px;
        }
    }

    #container {
        position: relative;
        width: 100%;
        height: 300px;
        border-bottom: 1px solid #fff;
        overflow: hidden;
    }

</style>

<div id="container">
</div>
<script src="jquery.js"></script>

<script>


    var centerX = 900;
    var centerY = 150;
    var w = 50;
    var h = 50;
    var cols = 40;
    var rows = 8;

    /*    $('<div class="grid">').css({
     top: centerX - w,
     left: centerY - h
     }).appendTo('body');

     $('<div class="grid">').css({
     top: centerX,
     left: centerY - h
     }).appendTo('body');

     $('<div class="grid">').css({
     top: centerX,
     left: centerY
     }).appendTo('body');

     $('<div class="grid">').css({
     top: centerX - w,
     left: centerY
     }).appendTo('body');*/

    var startX = centerX - cols / 2 * w;
    var startY = centerY - rows / 2 * h;


    for (var i = 0; i < rows; i++) {
        for (var j = 0; j < cols; j++) {
            $('<div class="grid">').css({
                top: startY + i * 2,
                left: startX + j * w + j * 2
            }).appendTo('#container');
        }
        startY += h;
    }
    //        animation: scale 3s linear infinite;



</script>


</body>
</html>